<template>
  <div class="chose-plotw">
    <head-top :head-title="'选择小区-'+cityName" go-back="true" choseCity="切换城市" @city="toChoseCity"></head-top>
    <div class="plot-wrapper">
      <div class="search">
        <div class="search-wrapper">
          <input ref="inputs" type="text" placeholder="请输入小区的名称" @keyup.enter="searchVillage" @input="searchVillage"
                 v-model="keyword">
          <span class="search-icon" @click="searchVillage"></span>
        </div>
        <div class="now-plot">所在小区</div>
      </div>
      <!-- <ul>
        <li v-for="(item,index) in lists" :key="index" tag="div" class="line" @click="goHome(item)">
          {{item.title}}
        </li>
      </ul> -->
    </div>
    <mt-index-list>
      <mt-index-section :index="index" v-for="(item,index) in data" :key="index">
        <div v-for="(list,index) in item" @click="goIssue(list)">
          <mt-cell :title="list.title"></mt-cell>
        </div>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>

<script>
  import headTop from '../../header/Header.vue'
  // import commonUrl from '../../common/js/commonUrl.js'
  import { getVillages, searchKeywords } from '../../../api/orderVillage.js'
  // import bus from '../../common/js/commonvue.js'
  import { saveHomeId, saveHomeTitle, loadOrderCity } from '../../../common/js/cache.js'

  export default {
    name: 'OrderPlot',
    data () {
      return {
        data: {},
        keyword: '',
        cityName: loadOrderCity()
        // cityName: loadCity() || '杭州'
      }
    },
    created () {
      this._getVillages()
    },
    methods: {
      // 获取小区列表
      _getVillages () {
        getVillages(this.$route.params.id).then(res => {
          this.data = res.data
          // console.log(res)
        })
      },
      toChoseCity () {
        this.$router.push({
          path: '/OrderCity'
        })
      },
      searchVillage () {
        searchKeywords(this.keyword).then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      goIssue (item) {
        saveHomeId(item.id)
        saveHomeTitle(item.title)
        // this.$router.push({
        //   path: '/OrderIssue'
        // })
        this.$router.replace({path: '/OrderIssue'})
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss">
  @import '../../../common/sass/mixin.scss';

  .chose-plotw {
    .mint-indexlist {
      margin-top: 84px;
    }
    .mint-cell {
      background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: bottom;
    }
    .mint-indexlist-content {
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
    .mint-cell-wrapper {
      background-size: 120% 0px;
    }
  }

  .plot-wrapper {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    .search {
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      background-color: #fff;
      text-align: center;
      height: 44px;
      line-height: 44px;
      .now-plot {
        padding-left: 10px;
        text-align: left;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        background-color: #D9D9D9;
      }
      .search-wrapper {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 92%;
        margin: 0 10px;
        border-radius: 4px;
        background-color: #e6e6e6;
        input {
          width: 118px;
          font-size: 14px;
          outline: none;
          border: none;
          background-color: #e6e6e6;
          &::-ms-input-placeholder {
            text-align: center;
          }
          &::-webkit-input-placeholder {
            text-align: center;
          }
        }
        .search-icon {
          display: inline-block;
          width: 17px;
          height: 17px;
          background-size: 17px 17px;
          background-repeat: no-repeat;
          @include bgimg('../../home/images/search');
          vertical-align: middle;
        }

      }
    }
  }
</style>
